<template>
    <div class="newsBox">
        <van-sticky>
            <div class="header">新闻</div>
        </van-sticky>
        <van-tabs v-model="active" @click="changeTitle">
            <van-tab v-for="item in titleList" :title="item.name" :key="item.id" :name="item.id">
                <div class="newsList">
                    <div class="newsOne" v-for="news in newsList" :key="news.id" @click="gotoDetail(news)">
                        <div class="newsImg">
                            <img :src="'http://218.7.112.123:10001/'+news.cover" alt="">
                        </div>
                        <div class="context">
                            <div class="title">
                                {{news.title}}
                            </div>
                            <div class="text" v-html="news.content">

                            </div>
                            <div class="comments">
                                <span>评论总数 : {{news.commentNum}}</span>
                                <span class="commentsTime">评论时间 : {{news.publishDate}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </van-tab>
        </van-tabs>

        <div class="box"></div>
    </div>
</template>
<script>
import { newsListQuery, newsListKeyQuery } from "../service/commons/news";
export default {
    data() {
        return {
            active: 0,
            titleList: [],
            newsList: [],
        }
    },
    async created() {
        let { data } = await newsListQuery();
        this.titleList = data.data;
        console.log(data.data);

        let { data: list } = await newsListKeyQuery({
            type: data.data[0].id,
        })
        this.newsList = list.rows;
        // console.log(list.rows[0].content);

    },
    methods: {
        async changeTitle(name, title) {
            console.log(111);
            let { data: list } = await newsListKeyQuery({
                type: name,
            })
            this.newsList = list.rows;
            console.log(list);
            console.log(name, title);
        },
        gotoDetail(item) {
            this.$router.push("/newsdetail/" + item.id);
        }
    }
}

</script>
<style scoped lang="scss">
.box {
    height: 50px;
}

.newsList {
    padding: 10px;

    .newsOne {
        padding: 10px 0;
        display: flex;
        border-bottom: 1px solid #ebe9e9;

        .newsImg {
            width: 100px;


            img {
                width: 100%;
                height: 100%;
            }
        }

        .context {
            width: calc(100% - 100px);
            margin-left: 10px;

            .text {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                /*设置对齐模式*/
                -webkit-line-clamp: 3;
                /*设置多行的行数，示例为2行*/
            }

            .commentsTime {
                margin-left: 20px;
            }

            .title {
                font-weight: 700;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
}

.newsBox {
    margin-bottom: 50px;
}
</style>